<template>
  <div class="info-content">
    <div class="page-main-title">告警配置
      <div class="actions" v-if="isPermmited('PARK:CONFIG:MANAGE:ALARM:UPDATE')">
        <a href="javascript:;" @click="toEditPage">编辑</a>
      </div>
    </div>
    <div class="info-main-content">
      <h3 class="offline_config-title">离线配置</h3>
      <div class="no-config" v-if="offlineDuration === ''">
        <img src="../../../../assets/img/ic_notopend_addvaule@2x.svg" alt>
        <span>未配置</span>
      </div>
      <div class="offline-config-box" v-if="offlineDuration !== ''">
        <p>
          <span>离线时长大于</span>
          <span>{{offlineDuration}}分钟 启动告警</span>
        </p>
        <p>
          <span>离线提醒次数</span>
          <span>{{offlineRemindTotal}}次</span>
        </p>
        <p>
          <span>离线提醒间隔</span>
          <span>{{remindInterval}}分钟</span>
        </p>
        <p>
          <span>重新连接后</span>
          <span>{{reconnectMinsAfter}}分钟 解除告警</span>
        </p>
      </div>
      <h3 class="accendant-title">维护人员</h3>
      <div class="no-config" v-if="oldMaintainer.length === 0">
        <img src="../../../../assets/img/ic_notopend_addvaule@2x.svg" alt>
        <span>未配置</span>
      </div>
      <div class="accendant-box" v-else>
        <p v-for="(item, index) in oldMaintainer">
          <span>维护人员{{index+1}}</span>
          <span>{{item.userName}}</span>
          <span>{{item.phone}}</span>
        </p>
      </div>
      <h3 class="trust-level-title">置信度提醒设置</h3>
      <div class="tip-remind"  v-if="enterConfidence===0 || (enterConfidence!==null && enterConfidence!=='')">进场车辆置信度低于<span>{{enterConfidence}}%</span>提醒中央值守人员</div>
      <div class="no-config" v-else-if="enterConfidence!==0 && (enterConfidence===null || enterConfidence==='')">
        <img src="../../../../assets/img/ic_notopend_addvaule@2x.svg" alt>
        <span>未配置</span>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@mixins/common.js";
export default {
  mixins: [common],
  props: ["parkId"],
  data() {
    return {
      parkName: "",
      id: "", //告警配置id
      recordId: "", //记录id
      oldMaintainer: [], //维护人员
      offlineDuration: "",
      offlineRemindTotal: "",
      remindInterval: "",
      reconnectMinsAfter: "",
      enterConfidence: "", //置信度
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let self = this;
      let params = {
        parkId: this.parkId
      };

      API.fetchGet("/operatorPark/getAlarm", params).then(
        res => {
          if (res.data) {
            self.recordId = res.data.id;
            self.offlineDuration = res.data.offlineDuration;
            self.offlineRemindTotal = res.data.offlineRemindTotal;
            self.remindInterval = res.data.remindInterval;
            self.reconnectMinsAfter = res.data.reconnectMinsAfter;
            self.enterConfidence = res.data.enterConfidence//置信度
            self.oldMaintainer = [];
            if (res.data.oldMaintainer) {
              for (let i = 0; i < res.data.oldMaintainer.length; i++) {
                let tempObj = res.data.oldMaintainer[i];
                let obj = {
                  userName: tempObj.userName,
                  phone: tempObj.phone
                };
                self.oldMaintainer.push(obj);
              }
            }
          }
        },
        err => {}
      );
    },
    toEditPage() {
      this.$router.push({
        path: "/parkingLot/allParkingLot/emergency",
        query: this.$route.query
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../../assets/less/base/variables.less";
@import "../../../../assets/less/base/newTabPageCommom.less";
.info-main-content {
  padding: 18px 20px 20px 18px;
}
.no-config {
  margin-top: 20px;
  padding-left: 20px;
  height: 25px;
  line-height: 25px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  span {
    color: #474747;
  }
}
.offline_config-title,
.accendant-title,
.trust-level-title {
  height: 40px;
  padding-left: 20px;
  line-height: 40px;
  background: @grayF2;
  font-size: 14px;
  color: @black;
  font-weight: 600;
}
.offline-config-box {
  padding-left: 20px;
  p {
    margin-top: 28px;
    color: #474747;
    span {
      &:first-child {
        display: inline-block;
        width: 92px;
        text-align: left;
      }
      &:last-child {
        padding-left: 20px;
      }
    }
  }
}
.accendant-title,.trust-level-title {
  margin-top: 40px;
}
.accendant-box {
  padding-left: 20px;
  p {
    margin-top: 28px;
    span {
      &:nth-child(2) {
        padding-left: 42px;
      }
      &:last-child {
        padding-left: 20px;
      }
    }
  }
}
.tip-remind{
  padding-left: 20px;
  margin-top: 20px;
  span{
    color: #3a87fd;
  }
}
</style>
